<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理后台</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body { background: #f5f6fa; }
        .admin-container { max-width: 1200px; margin: 40px auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 30px; }
        .admin-nav { display: flex; gap: 30px; margin-bottom: 30px; }
        .admin-nav button { padding: 10px 24px; border: none; border-radius: 4px; background: #2c3e50; color: #fff; cursor: pointer; font-size: 16px; }
        .admin-nav button.active { background: #3498db; }
        .admin-section { display: none; }
        .admin-section.active { display: block; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #eaeaea; padding: 10px; text-align: center; }
        th { background: #f0f2f5; }
        .action-btn { margin: 0 4px; padding: 4px 10px; border: none; border-radius: 3px; cursor: pointer; }
        .edit-btn { background: #f39c12; color: #fff; }
        .delete-btn { background: #e74c3c; color: #fff; }
        .toggle-btn { background: #3498db; color: #fff; }
        .add-btn { background: #27ae60; color: #fff; margin-bottom: 10px; }
        .stat-card { display: inline-block; width: 220px; background: #f8f9fa; border-radius: 8px; margin: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); text-align: center; }
        .stat-card h3 { margin-bottom: 10px; font-size: 18px; color: #2c3e50; }
        .stat-card p { font-size: 24px; color: #3498db; }
    </style>
</head>
<body>
<div class="admin-container">
    <div class="admin-nav">
        <button id="nav-users" class="active">用户管理</button>
        <button id="nav-jobs">职位管理</button>
        <button id="nav-announcements">公告管理</button>
        <button id="nav-stats">数据统计</button>
            </div>

            <!-- 用户管理 -->
    <div id="section-users" class="admin-section active">
        <h2>用户管理</h2>
        <table id="user-table">
                        <thead>
                            <tr>
                    <th></th>
                    <th>用户名</th>
                    <th>头像</th>
                    <th>注册时间</th>
                    <th>状态</th>
                                <th>角色</th>
                                <th>操作</th>
                            </tr>
                        </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>user</td>
                    <td><img src="https://img2.baidu.com/it/u=2216789642,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="头像" style="width:40px;height:40px;border-radius:50%;"></td>
                    <td>2024-10-08 15:11:04</td>
                    <td><span style="color:#27ae60;">正常</span></td>
                    <td>user</td>
                    <td>
                        <button class="action-btn edit-btn">编辑</button>
                        <button class="action-btn delete-btn">删除</button>
                        <button class="action-btn toggle-btn" style="background:#ff9800;">封禁/解封</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>hr</td>
                    <td><img src="https://img2.baidu.com/it/u=2216789642,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="头像" style="width:40px;height:40px;border-radius:50%;"></td>
                    <td>2024-09-08 14:11:04</td>
                    <td><span style="color:#27ae60;">正常</span></td>
                    <td>manager hr</td>
                    <td>
                        <button class="action-btn edit-btn">编辑</button>
                        <button class="action-btn delete-btn">删除</button>
                        <button class="action-btn toggle-btn" style="background:#ff9800;">封禁/解封</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>hr9</td>
                    <td><img src="https://img2.baidu.com/it/u=2216789642,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="头像" style="width:40px;height:40px;border-radius:50%;"></td>
                    <td>2024-09-08 14:11:04</td>
                    <td><span style="color:#27ae60;">正常</span></td>
                    <td>hr manager</td>
                    <td>
                        <button class="action-btn edit-btn">编辑</button>
                        <button class="action-btn delete-btn">删除</button>
                        <button class="action-btn toggle-btn" style="background:#ff9800;">封禁/解封</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>hr13</td>
                    <td><img src="https://img2.baidu.com/it/u=2216789642,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="头像" style="width:40px;height:40px;border-radius:50%;"></td>
                    <td>2024-09-15 11:29:14</td>
                    <td><span style="color:#27ae60;">正常</span></td>
                    <td>hr</td>
                    <td>
                        <button class="action-btn edit-btn">编辑</button>
                        <button class="action-btn delete-btn">删除</button>
                        <button class="action-btn toggle-btn" style="background:#ff9800;">封禁/解封</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>hr12</td>
                    <td><img src="https://img2.baidu.com/it/u=2216789642,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="头像" style="width:40px;height:40px;border-radius:50%;"></td>
                    <td>2024-09-15 11:18:59</td>
                    <td><span style="color:#27ae60;">正常</span></td>
                    <td>manager hr</td>
                    <td>
                        <button class="action-btn edit-btn">编辑</button>
                        <button class="action-btn delete-btn">删除</button>
                        <button class="action-btn toggle-btn" style="background:#ff9800;">封禁/解封</button>
                    </td>
                </tr>
                        </tbody>
                    </table>
            </div>

    <!-- 职位管理 -->
    <div id="section-jobs" class="admin-section">
        <h2>职位管理</h2>
        <button class="add-btn" onclick="openJobModal()">+ 新增职位</button>
        <table id="job-table" style="width:100%; border-collapse:collapse; background:#fff; margin-top:20px;">
  <thead style="background:#fafafa;">
    <tr>
      <th>职位名</th>
      <th>岗位类型</th>
      <th>学历要求</th>
      <th>工作经验</th>
      <th>工资</th>
      <th>工作地区</th>
      <th>详细地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
  <tbody>
    <tr>
      <td>测试工程师</td>
      <td>技术·测试</td>
      <td>本科</td>
      <td>在校生</td>
      <td>50K-71K</td>
      <td>北京市·北京市</td>
      <td>海淀区钻石大厦</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>算法工程师</td>
      <td>技术·算法</td>
      <td>博士</td>
      <td>应届生</td>
      <td>12K-20K</td>
      <td>四川省·成都市</td>
      <td>武侯区东方希望大厦</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>java实习开发工程师</td>
      <td>技术·后端</td>
      <td>本科</td>
      <td>在校生</td>
      <td>5K-10K</td>
      <td>广东省·深圳市</td>
      <td>南山区 腾讯大厦</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>java初级开发工程师</td>
      <td>技术·后端</td>
      <td>本科</td>
      <td>一年以上</td>
      <td>12K-20K</td>
      <td>广东省·深圳市</td>
      <td>南山区 腾讯大厦</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>产品经理</td>
      <td>产品·产品经理</td>
      <td>本科</td>
      <td>一年以上</td>
      <td>50K-72K</td>
      <td>北京市·北京市</td>
      <td>海淀区华为大厦</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>java高级开发工程师</td>
      <td>技术·后端</td>
      <td>本科</td>
      <td>一年以上</td>
      <td>12K-19K</td>
      <td>北京市·北京市</td>
      <td>北京市海淀区百度大厦</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>算法工程师</td>
      <td>技术·算法</td>
      <td>博士</td>
      <td>五年以上</td>
      <td>50K-71K</td>
      <td>广东省·深圳市</td>
      <td>南山区 永新汇1号楼</td>
      <td><button class="action-btn delete-btn">删除</button></td>
    </tr>
                        </tbody>
                    </table>
    </div>

    <!-- 公告管理 -->
    <div id="section-announcements" class="admin-section">
        <h2>公告管理</h2>
        <button class="add-btn" onclick="openAnnouncementModal()">+ 新增公告</button>
        <table id="announcement-table">
                <thead>
                <tr><th>标题</th><th>内容</th><th>发布时间</th><th>操作</th></tr>
                </thead>
            <tbody></tbody>
            </table>
        </div>

        <!-- 数据统计 -->
    <div id="section-stats" class="admin-section">
            <h2>数据统计</h2>
        <div id="stats-cards"></div>
                </div>
            </div>

<!-- 职位编辑弹窗 -->
<div id="job-modal" style="display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.2); align-items:center; justify-content:center;">
    <div style="background:#fff; padding:30px; border-radius:8px; min-width:400px;">
        <h3 id="job-modal-title">新增职位</h3>
        <form id="job-form">
            <input type="hidden" id="job-id">
            <div><input type="text" id="job-title" placeholder="职位名称*" required style="width:100%;margin:8px 0;"></div>
            <div><input type="text" id="job-company" placeholder="公司名称*" required style="width:100%;margin:8px 0;"></div>
            <div><input type="text" id="job-status" placeholder="状态(on/off)" required style="width:100%;margin:8px 0;"></div>
            <div><input type="date" id="job-date" placeholder="发布时间" required style="width:100%;margin:8px 0;"></div>
            <div><button type="submit" class="add-btn">保存</button> <button type="button" onclick="closeJobModal()">取消</button></div>
        </form>
            </div>
        </div>

<!-- 公告编辑弹窗 -->
<div id="announcement-modal" style="display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.2); align-items:center; justify-content:center;">
    <div style="background:#fff; padding:30px; border-radius:8px; min-width:400px;">
        <h3 id="announcement-modal-title">新增公告</h3>
        <form id="announcement-form">
                <input type="hidden" id="announcement-id">
            <div><input type="text" id="announcement-title" placeholder="公告标题*" required style="width:100%;margin:8px 0;"></div>
            <div><textarea id="announcement-content" placeholder="公告内容*" required style="width:100%;margin:8px 0;"></textarea></div>
            <div><input type="date" id="announcement-date" placeholder="发布时间" required style="width:100%;margin:8px 0;"></div>
            <div><button type="submit" class="add-btn">保存</button> <button type="button" onclick="closeAnnouncementModal()">取消</button></div>
        </form>
                </div>
            </div>
            
        <script>
// 导航切换
const navs = ['users','jobs','announcements','stats'];
navs.forEach(n => {
    document.getElementById('nav-' + n).onclick = function() {
        navs.forEach(m => {
            document.getElementById('nav-' + m).classList.remove('active');
            document.getElementById('section-' + m).classList.remove('active');
        });
        this.classList.add('active');
        document.getElementById('section-' + n).classList.add('active');
    }
});

// 用户管理
async function loadUsers() {
    const res = await fetch('http://localhost:3001/api/admin/users');
    const { success, data } = await res.json();
    if (!success) return;
    const tbody = document.querySelector('#user-table tbody');
    tbody.innerHTML = data.map(u => `<tr>
        <td>${u.username}</td><td>${u.email}</td><td>${u.role}</td><td>${u.status}</td>
        <td><button class="action-btn edit-btn" onclick="editUser('${u._id}')">编辑</button></td>
    </tr>`).join('');
}

// 职位管理
async function loadJobs() {
    const res = await fetch('http://localhost:3001/api/jobs');
    const { success, data } = await res.json();
    if (!success) return;
    const tbody = document.querySelector('#job-table tbody');
    tbody.innerHTML = data.map(j => `<tr>
        <td>${j.title}</td><td>${j.companyId?.name||'-'}</td><td>${j.status}</td><td>${j.createdAt?.slice(0,10)||'-'}</td>
        <td>
            <button class="action-btn edit-btn" onclick="openJobModal('${j._id}')">编辑</button>
            <button class="action-btn toggle-btn" onclick="toggleJobStatus('${j._id}', '${j.status}')">${j.status==='on'?'下架':'上架'}</button>
            <button class="action-btn delete-btn" onclick="deleteJob('${j._id}')">删除</button>
                                </td>
    </tr>`).join('');
}

// 公告管理
async function loadAnnouncements() {
    const res = await fetch('http://localhost:3001/api/announcements');
    const { success, data } = await res.json();
    if (!success) return;
    const tbody = document.querySelector('#announcement-table tbody');
    tbody.innerHTML = data.map(a => `<tr>
        <td>${a.title}</td><td>${a.content}</td><td>${a.createdAt?.slice(0,10)||'-'}</td>
        <td><button class="action-btn edit-btn" onclick="openAnnouncementModal('${a._id}')">编辑</button></td>
    </tr>`).join('');
}

// 数据统计
async function loadStats() {
    const res = await fetch('http://localhost:3001/api/admin/stats');
    const { success, data } = await res.json();
    if (!success) return;
    const cards = [
        {title:'注册用户数', value:data.userCount},
        {title:'企业数', value:data.companyCount},
        {title:'职位数', value:data.jobCount},
        {title:'简历数', value:data.resumeCount},
        {title:'投递数', value:data.applicationCount}
    ];
    document.getElementById('stats-cards').innerHTML = cards.map(c => `<div class="stat-card"><h3>${c.title}</h3><p>${c.value}</p></div>`).join('');
}

// 职位弹窗
function openJobModal(id) {
    document.getElementById('job-modal').style.display = 'flex';
    if (id) {
        // 加载职位信息并填充表单（略，可用loadJobById实现）
        document.getElementById('job-modal-title').innerText = '编辑职位';
    } else {
        document.getElementById('job-form').reset();
        document.getElementById('job-modal-title').innerText = '新增职位';
    }
}
function closeJobModal() { document.getElementById('job-modal').style.display = 'none'; }

// 公告弹窗
function openAnnouncementModal(id) {
    document.getElementById('announcement-modal').style.display = 'flex';
    if (id) {
        // 加载公告信息并填充表单（略）
        document.getElementById('announcement-modal-title').innerText = '编辑公告';
                    } else {
        document.getElementById('announcement-form').reset();
        document.getElementById('announcement-modal-title').innerText = '新增公告';
    }
}
function closeAnnouncementModal() { document.getElementById('announcement-modal').style.display = 'none'; }

// 职位上下架
async function toggleJobStatus(id, status) {
    await fetch(`http://localhost:3001/api/jobs/${id}/status`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: status==='on'?'off':'on' })
    });
    loadJobs();
}
// 职位删除
async function deleteJob(id) {
    if (!confirm('确定删除该职位？')) return;
    await fetch(`http://localhost:3001/api/jobs/${id}`, { method: 'DELETE' });
    loadJobs();
}

// 页面初始化
loadUsers();
loadJobs();
loadAnnouncements();
loadStats();
    </script>
<script src="js/admin-jobs.js"></script>
</body>
</html>